<script setup>
import {onMounted, reactive, ref} from "vue";

import ContentNav from "@/zdpui/components/layout/ContentNav.vue";
import Table from "@/zdpui/components/table/Table.vue";
import Page from "@/zdpui/components/table/Page.vue";
import Modal from "@/zdpui/components/modal/Modal.vue";
import Label from "@/zdpui/components/form/Label.vue";
import Input from "@/zdpui/components/form/Input.vue";
import apiAuthUser from "@/api/auth_user.js"
import msg from "@/zdpui/util/msg.js";

// 内容导航链接
const contentNavLinks = [
  {id: 1, text: '新增', href: '#'},
]
// 内容导航点击事件
const onContentNavClick = (index, item) => {
  console.log(index, item)
  switch (index) {
    case 0:
      isShow.value = true
      break
  }
}
// 是否显示模态框
const isShow = ref(false)
// 编辑的ID
const editId = ref()
// 初始化表单
const initForm = () => {
  editId.value = null
  form.username = ""
  isShow.value = false
}
// 模态框确认
const onConfirm = async () => {
  console.log("新增表单的数据:", form)
  if (!form.username || !form.password) {
    msg.warning("用户名或密码不能为空")
    return
  }
  if (editId.value) {
    await apiAuthUser.update(
        editId.value,
        form.username,
        form.password,
    )
    editId.value = null
  } else {
    await apiAuthUser.add(form.username, form.password)
  }
  initForm()
  page.value = 1
  await onLoadData()
}
// 模态框关闭
const onClose = () => {
  initForm()
}
// 表单
const form = reactive({
  username: '',
  password: '',
})
// 表格的列
const columns = [
  {
    label: 'ID',
    prop: 'id',
  },
  {
    label: '用户名',
    prop: 'username',
  },
  {
    label: '操作',
    prop: 'action',
  },
]
// 表格数据
const tableData = ref([
  {
    id: 1,
    username: 'zhangdapeng',
  },
  {
    id: 2,
    username: 'admin',
  },
])
// 点击编辑的时候
const onEdit = (row) => {
  editId.value = row.id
  form.username = row.username
  form.password = row.password
  isShow.value = true
}
// 点击删除的时候
const onDelete = async (row) => {
  await apiAuthUser.del(row.id)
  page.value = 1
  await onLoadData()
}
// 第几页
const page = ref(1)
// 每页多少条数据
const size = ref(5)
// 总共有多少条
const total = ref(0)
// 监听分页切换事件
const onPageChange = async (current) => {
  page.value = current
  await onLoadData()
}
// 加载数据
const onLoadData = async () => {
  let data = await apiAuthUser.getPage(page.value, size.value)
  tableData.value = data.data
  total.value = data.total
}
onMounted(async () => {
  await onLoadData()
})
</script>

<template>
  <ContentNav
      :data="contentNavLinks"
      @click="onContentNavClick"
  />
  <Table
      :columns="columns"
      :data="tableData"
      @edit="onEdit"
      @delete="onDelete"
  />
  <Page
      :page="page"
      :size="size"
      :total="total"
      @change="onPageChange"
  />

  <!--新增和编辑的表单-->
  <Modal
      :show="isShow"
      :title="editId ? '编辑':'新增' + '用户'"
      @confirm="onConfirm"
      @close="onClose"
  >
    <Label text="账号">
      <Input v-model="form.username"/>
    </Label>
    <Label text="密码">
      <Input v-model="form.password" type="password"/>
    </Label>
  </Modal>
</template>

<style scoped>

</style>